<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="试卷创编" name="first">

      <div class="info">
        <!--        学科选择框-->
        <div class="block">
          <div class="label"><span class="text">* 学科：</span></div>
          <div class="input">
            <el-select v-model="BankQuestionParam.subjectId" clearable placeholder="请选择学科">
              <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </div>
        </div>
        <!--        试卷标题-->
        <div class="block">
          <div class="label"><span class="text">* 试卷标题：</span></div>
          <div class="input">
            <el-input placeholder="请输入试卷标题" v-model="paperData.paperTitle" clearable/>
          </div>
        </div>
        <!--        试卷描述-->
        <div class="block">
          <div class="label"><span class="text">* 试卷描述：</span></div>
          <div class="input">
            <el-input placeholder="请输入试卷描述" v-model="paperData.paperDesc" clearable/>
          </div>
        </div>


        <div style="height: 30px"></div>
      </div>
      <!--        空列-->
      <div style="height: 30px"></div>

      <!--        试题卡信息-->
      <div v-if="questionCardListData.length!=0" class="questionsBlock">


        <el-card class="box-card" v-for="(item,index) in questionCardListData">

          <div class="title" slot="header">
            <span
                style="text-align: start;width: 90%"><p style="display: inline-block;color: #409EFF">{{ typeOptions[item.questionType-1].label }}&nbsp&nbsp&nbsp</p>({{ index + 1 }}). {{ item.questionTitle }} </span>
            <el-button class="delete" style="float: right; padding: 3px 0" type="text" @click="deleteOneQuestion(item)">
              删除
            </el-button>
          </div>

          <div class="content">
            <!--            选择题选项-->
            <div v-if="item.questionType==1||item.questionType==2" class="choice"
                 v-for="(question,index) in item.bankQuestionChoiceList" :key="question.id">
              <div>
                {{ preChoice[index] }}. {{ question.choiceText }}
              </div>
            </div>
            <!--            填空题参考答案-->
            <div v-if="item.questionType==3" class="choice" v-for="(answer,index) in item.bankQuestionAnswerList"
                 :key="answer.id">
              ({{ index + 1 }}). {{ answer.answerText }}
            </div>
            <!--            简答题参考答案-->
            <div v-if="item.questionType==4" class="choice" v-for="(answer,index) in item.bankQuestionAnswerList"
                 :key="answer.id">
              ({{ index + 1 }}). {{ answer.answerText }}
            </div>
          </div>

        </el-card>
        <!--        空列-->
        <div style="height: 60px"></div>

      </div>

      <!--      空状态-->
      <el-empty v-else description="请添加题目"></el-empty>

      <div class="addButtonMenu">
        <el-button style="height: 40px;margin-left: 10px" type="success" @click="addQuestion">添加题目</el-button>
        <el-button v-if="this.questionCardListData.length!=0"
                   style="height: 40px;margin-left: 10px" type="primary" @click="savePaper">提交试卷
        </el-button>
        <el-button type="info" v-if="this.questionCardListData.length!=0" @click="clearQuestionCardListData()" >清空题目</el-button>
        <div  style="margin-left: 10px"
            v-if="this.questionCardListData.length!=0" >（共<span style="color: #409EFF">{{this.questionCardListData.length}}</span>个试题）</div>
      </div>

      <el-dialog title="试题列表" :visible.sync="addQuestionFormVisible">

        <div class="topBlock">
          <el-button size="medium" icon="el-icon-plus" style="margin-left: 0px; "/>
          <el-button size="medium" icon="el-icon-delete-solid"/>
          <el-input placeholder="请输入内容" v-model="BankQuestionParam.selectText" class="input-with-select"
                    style="margin-left: 10px;width: 500px; ">
            <el-button slot="append" icon="el-icon-search" @click="getBankQuestion"></el-button>
          </el-input>

          <el-select v-model="BankQuestionParam.questionType" clearable placeholder="题目类型" style="margin-left: 10px">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

          <el-select v-model="BankQuestionParam.subjectId" clearable placeholder="学科类型" style="margin-left: 10px">
            <el-option
                v-for="item in subjectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

        </div>

        <el-scrollbar style="height: 450px; ">
          <div v-if="bankQuestionListData.length!=0">
            <el-table :data="bankQuestionListData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                      :header-cell-style="{'border': 'none',textAlign:'start'}"
                      :cell-style="{'border': 'true',textAlign:'start',}"
                      ref="selectBankQuestionList"
                      @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column type="index" label="排序" width="50"></el-table-column>
              <el-table-column
                  label="试题标题" width="500"
              >
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>{{ scope.row.questionTitle }}</p>
                    <div v-if="scope.row.questionType==1||scope.row.questionType==2"
                         v-for="(item,index) in scope.row.bankQuestionChoiceList">
                      <p style="margin-left: 10px;display: inline-block ">{{ preChoice[index] }}.</p>
                      <p style="margin-left: 10px; display: inline-block">{{ item.choiceText }}</p>
                    </div>
                    <div v-if="scope.row.questionType==3 " v-for="(item,index) in scope.row.bankQuestionAnswerList">
                      <p style="margin-left: 10px;display: inline-block ">({{ index + 1 }}).</p>
                      <p style="margin-left: 10px; display: inline-block;width: 400px">{{ item.answerText }}</p>
                    </div>
                    <div v-if="scope.row.questionType==4 " v-for="(item,index) in scope.row.bankQuestionAnswerList">
                      <p style="margin-left: 10px;color: #67C23A ">参考答案.</p>
                      <p style="margin-left: 10px;width: 400px">{{ item.answerText }}</p>
                    </div>
                    <div slot="reference" class="name-wrapper">
                      <span>{{ scope.row.questionTitle }}</span>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="questionType" label="试题类型">
                <template slot-scope="scope">
                  <span> {{ typeOptions[Number(scope.row.questionType) - 1].label }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="questionType" label="学科类型">
                <template slot-scope="scope">
                  <span> {{ subjectOptions[Number(scope.row.questionSubjectId) - 1].label }} </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>


        <div class="footers">
          <el-pagination

              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next, total, sizes"
              :total="bankQuestionListData.length"
              :current-page="currentPage"
              :page-sizes="[12,20]"
          >
          </el-pagination>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addQuestionFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="applyQuestionList">应用</el-button>
        </div>
      </el-dialog>

    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {getBankQuestionApi} from "@/api/BankQuestion";
import {savePaperApi} from "@/api/paper";
import notification from "@/utils/notification";

export default {
  name: "PaperMakerView",
  data() {
    return {
      //分页数据
      currentPage: 1, //初始页
      pageSize: 12, //    每页的数据
      //题目数量
      questionNum: 6,
      preChoice: ['A', 'B', 'C', 'D'],
      activeName: "first",
      text: {
        input: ''
      },
      subjectOptions: [
        {
          value: '1',
          label: '工科'
        }, {
          value: '2',
          label: '理科'
        }, {
          value: '3',
          label: '文科'
        }, {
          value: '4',
          label: '社会科学'
        }, {
          value: '5',
          label: '商科'
        }, {
          value: '6',
          label: '医学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '体育'
        }, {
          value: '9',
          label: '计算机科学'
        }, {
          value: '10',
          label: '环境科学'
        }],
      typeOptions: [
        {
          value: '1',
          label: '单选题'
        }, {
          value: '2',
          label: '多选题'
        }, {
          value: '3',
          label: '填空题'
        }, {
          value: '4',
          label: '简答题'
        }],
      //添加作业隐藏框的逻辑量
      addQuestionFormVisible: false,
      //试题列表
      bankQuestionListData: [],
      //多选试题中间量
      selectBankQuestionList: [],
      //模糊查参数
      BankQuestionParam: {
        selectText: "",
        questionType: "",
        subjectId: '',
      },
      //试题卡数据
      questionCardListData: [],
      //组卷信息
      paperData: {
        paperTitle: '',
        paperDesc: '',
      }
    }
  },
  methods: {
    clearQuestionCardListData(){
      this.questionCardListData= []
    },
    //提交编撰的试卷
    async savePaper() {
      // console.log(ids);
      // console.log(this.paperData);
      let confirm = await this.$myConfirm("确认保存试卷？")
      if (confirm) {
        let ids = [];
        this.questionCardListData.forEach(function (obj) {
          ids.push(obj.id); // 将对象的 id 属性添加到 ids 数组中
        });
        const paperParam = {
          paperTitle: this.paperData.paperTitle,
          paperDesc: this.paperData.paperDesc,
          ids: ids
        }
        savePaperApi(paperParam).then(res => {
            console.info(res.data.data)
          if (res.data.code==200){
            notification.ntfCommonSuccess("提示", res.data.msg)
          }
        })
      }

    },
    deleteOneQuestion(item) {
      console.info("删除item", item)
      this.questionCardListData.forEach((obj, index) => {
        // 检查对象的 id 属性是否与目标 id 匹配 然后删除对象
        if (obj.id === item.id) {
          this.questionCardListData.splice(index, 1); // 使用splice方法删除匹配的对象
        }
      });

    },
    // 应用选中的题目
    applyQuestionList() {
      // 遍历 this.selectBankQuestionList 数组
      this.selectBankQuestionList.forEach(obj => {
        // 将对象添加到 questionCardListData 数组中
        this.questionCardListData.push(obj);
      });
      console.info("this.questionCardListData", this.questionCardListData)
      this.addQuestionFormVisible = false
    },
    //改变页面大小
    handleSizeChange(size) {
      // console.log(size, 'size');
      this.pageSize = size;
      console.log(this.pageSize); //改变每页显示数据条数
    },
    //改变当前页数
    handleCurrentChange(currentPage) {
      // console.log(currentPage, 'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //模糊查
    getBankQuestion() {
      getBankQuestionApi(this.BankQuestionParam).then(res => {
        if (res.data.code = 200) {
          console.info("res.data.data", res.data.data)
          this.bankQuestionListData = res.data.data
        }
      })
    },
    //添加题目按钮
    addQuestion() {
      this.addQuestionFormVisible = true;
      this.getBankQuestion()
    },
    //多选时每列的对象保存在selectBankQuestionList中
    handleSelectionChange(val) {
      this.selectBankQuestionList = val
      console.info("this.selectBankQuestionList", this.selectBankQuestionList)
    },
  }
}
</script>

<style scoped>

.footers {
  position: relative;
  bottom: -20px;
  width: 100%;
  height: 50px;

}

.topBlock {
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: start;
  border-radius: 5px;
}

.addButtonMenu {
  border-top-left-radius: 5px;
  background-color: #ffffff;
  align-items: center;
  display: flex;
  position: fixed;
  bottom: 0px;
  height: 60px;
  width: 1680px;

}


.box-card .content {
  display: flex;
  justify-content: start;
}

.box-card .content .choice {
  margin-right: 5%;
  text-align: start;
}

.box-card .title {
  width: 100%;
  display: flex;
  position: relative;
}

::v-deep .box-card .title .delete {
  width: 50px;
  position: absolute;
  right: 0px;
}

.box-card {
  width: 1250px;
  margin-bottom: 10px;

}

.questionsBlock {
  display: inline-grid;
  justify-content: center;
  width: 100%;

}

.info .block .label .text {
  display: flex;
  justify-content: end;
  color: #606266;
  line-height: 60px;
  font-weight: 700;
  padding-right: 10px;
  font-size: 15px;
}


.block {
  display: flex;
}

.info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.info .label {
  height: 60px;
  width: 6%;

  /*background-color: #409EFF;*/
}

.info .input {
  display: flex;
  align-items: center;
  height: 60px;
  width: 94%;
  /*background-color: #42b983;*/
}

</style>